/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Platform
} from 'react-native';
import Swiper from 'react-native-swiper';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import querendingdan from './querendingdan';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class ShopCar extends Component{
    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.list = [{storeName:'店铺1',isEdit:true,checked:false,goodsList:[{img:'../img/icon/1.jpg',checked:false,goodsName:'狗粮1',pinpai:'亲亲食品',price:'4.1',num:'6'},{img:'../img/icon/1.jpg',checked:false,goodsName:'狗粮2',pinpai:'亲亲食品',price:'4.2',num:'4'},{img:'../img/icon/1.jpg',checked:false,goodsName:'狗粮3',pinpai:'亲亲食品',price:'4.3',num:'1'}]},{storeName:'店铺1',isEdit:true,checked:false,goodsList:[{img:'../img/icon/1.jpg',checked:false,goodsName:'狗粮1',pinpai:'亲亲食品',price:'4.1',num:'2'},{img:'../img/icon/1.jpg',checked:false,goodsName:'狗粮2',pinpai:'亲亲食品',price:'4.2',num:'1'},{img:'../img/icon/1.jpg',checked:false,goodsName:'狗粮3',pinpai:'亲亲食品',price:'4.3',num:'3'}]}];
        this.state = {
            shopList:ds.cloneWithRows(this.list),
            checkedAll:false,
            editText:'编辑',
        };
    }
    renderGoodsItem(data,rowId,isEdit){
        // var aa = [1,2,3];
        // alert(JSON.stringify(data));
        return(
            data.map((item,i)=>{
                return(
                    <View style={{flexDirection:'row',alignItems:'center',paddingLeft:10,backgroundColor:'#fff',borderBottomWidth:1,borderBottomColor:'#ccc'}} key={i}>
                        <View>
                            <TouchableOpacity onPress={()=>this.checkGoods(rowId,i)}>
                                <ImageWrapper icon={item.checked?'selected':'circle'}/>
                            </TouchableOpacity>
                        </View>
                        <View style={{marginTop:10,marginBottom:10,flexDirection:'row',flex:1}}>
                            <View style={{paddingLeft:5,paddingRight:10}}>
                                <ImageWrapper width={60} height={60} icon={'touxiang'}/>
                            </View>
                            <View>
                                <Text style={{flex:1}}>{item.goodsName}</Text>
                                <Text style={{flex:1,fontSize:10}}>品牌 : {item.pinpai}</Text>
                                <Text style={{flex:1,color:'#FF7181'}}>单价 : {item.price}元</Text>
                            </View>
                        </View>
                        {isEdit?<View style={{flexDirection:'row',marginRight:10}}>
                            <TouchableOpacity onPress={()=>this.reduceNum(rowId,i)}>
                                <View style={styles.changeNumBtn}>
                                    <Text>-</Text>
                                </View>
                            </TouchableOpacity>
                            <View style={{borderBottomWidth:1,borderBottomColor:'#E8EDEB',borderTopWidth:1,borderTopColor:'#E8EDEB',width:30,height:24,justifyContent:'center',alignItems:'center'}}>
                                <Text style={{color:'#FF7181'}}>{data[i].num}</Text>
                            </View>
                            <TouchableOpacity onPress={()=>this.addNum(rowId,i)}>
                                <View style={styles.changeNumBtn}>
                                    <Text>+</Text>
                                </View>
                            </TouchableOpacity>
                        </View>:<TouchableOpacity onPress={()=>this.deleteGoods(rowId,i)}>
                            <View style={{backgroundColor:'#FF4848',width:60,flex:0.3,justifyContent:'center',alignItems:'center',}}>
                                <Text style={{color:'#fff'}}>删除</Text>
                            </View>
                        </TouchableOpacity>}
                    </View>
                )
            })
        )
    }

    renderStoreItem(rowData,sectionID,rowId){
        if(rowData.goodsList.length>0){
            return(
                <View style={{borderBottomWidth:1,borderBottomColor:'#ccc'}}>
                    <View style={{flexDirection:'row',height:50,alignItems:'center',paddingLeft:10,paddingRight:10,backgroundColor:'#fff'}}>
                        <TouchableOpacity onPress={()=>this.selectStore(rowId)}>
                            <ImageWrapper icon={rowData.checked?'selected':'circle'}/>
                        </TouchableOpacity>
                        <View style={{flex:1,marginLeft:10}}>
                            <Text>{rowData.storeName}</Text>
                        </View>
                        <TouchableOpacity onPress={()=>this.editStore(rowId)}>
                            <Text>{rowData.isEdit?'编辑':'完成'}</Text>
                        </TouchableOpacity>
                    </View>
                    <View style={{borderBottomWidth:1,borderBottomColor:'#ccc',marginLeft:10}}></View>
                    <View>
                        {this.renderGoodsItem(rowData.goodsList,rowId,rowData.isEdit)}
                    </View>
                </View>
            )
        }else{
            return(
                <View></View>
            )
        }
    }

    render(){
        var totalMoney = 0.00;
        var list = this.list;
        var len = list.length;
        for(var i=0;i<len;i++){
            var goodsLen = list[i].goodsList.length;
            for(var j=0;j<goodsLen;j++){
                if(list[i].goodsList[j].checked){
                    totalMoney+=parseFloat(list[i].goodsList[j].num*list[i].goodsList[j].price);
                }
            }
        }
        return (
            <View style={styles.container}>
                <NavigationBar leftIcon={'left'} titleText={'购物车'} leftPress={()=>this.goBack()} rightText={this.state.editText} rightTextPress={()=>this.edit()} rightTextStyle={{color:'#fff'}}/>
                <ListView
                    dataSource={this.state.shopList}
                    renderRow={(rowData,sectionID,rowId) => this.renderStoreItem(rowData,sectionID,rowId)}/>
                <View style={styles.bottomMenu}>
                    <View>
                        <TouchableOpacity onPress={()=>this.checkAll()} style={{flexDirection:'row',alignItems:'center'}}>
                            <ImageWrapper icon={this.state.checkedAll?'selected':'circle'}/>
                            <Text style={{color:'#030303',marginLeft:10}}>全选</Text>
                        </TouchableOpacity>
                    </View>
                    {this.state.editText=='编辑'?<View style={{flexDirection:'row',alignItems:'center',justifyContent:'flex-end',flex:1}}>
                        <Text>总计：</Text>
                        <Text style={{marginRight:10,color:'#030303'}}>￥{totalMoney.toFixed(2)}</Text>
                    </View>:<View style={{flex:1}}></View>}
                    {this.state.editText=='编辑'?<TouchableOpacity onPress={()=>this.goQuerendingdan()}>
                        <View style={styles.settleBtn}>
                            <Text style={{color:'#fff'}}>去结算</Text>
                        </View>
                    </TouchableOpacity>:<TouchableOpacity onPress={()=>this.deleteSelect()}>
                        <View style={styles.settleBtn}>
                            <Text style={{color:'#fff'}}>删除</Text>
                        </View>
                    </TouchableOpacity>}
                </View>
            </View>
        )

    }
    /*
    * 返回按钮
    */
    goBack(){
        this.props.navigation.goBack();
    }
    /*
    * 店铺选择按钮
    */
    selectStore(rowId){
        var staturs = this.list[rowId].checked;
        this.list[rowId].checked = !staturs;
        var len = this.list[rowId].goodsList.length;
        for(var i=0;i<len;i++){
            this.list[rowId].goodsList[i].checked = !staturs;
        }
        var arr = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(arr)
        })
    }
    /*
    * 减少购买数量
    */
    reduceNum(rowId,i){
        var number = this.list[rowId].goodsList[i].num;
        if(number>1){
            this.list[rowId].goodsList[i].num--;
        }
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list),
        })
    }
    /*
    * 增加购买数量
    */
    addNum(rowId,i){
        this.list[rowId].goodsList[i].num++;
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list),
        })
    }
    /*
    * 选择单个商品
    */
    checkGoods(rowId,i){
        var staturs = !this.list[rowId].goodsList[i].checked;
        this.list[rowId].goodsList[i].checked = staturs;
        var len = this.list[rowId].goodsList.length;
        var checkAllStore = true;
        for(var j=0;j<len;j++){

            if(staturs!=this.list[rowId].goodsList[j].checked){
                checkAllStore = false;
            }
        }
        if(checkAllStore && this.list[rowId].goodsList[0].checked){
            this.list[rowId].checked = true;
        }else{
            this.list[rowId].checked = false;
        }
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list)
        })
    }
    /*
    * 全选按钮
    */
    checkAll(){
        var staturs = !this.state.checkedAll;
        var len = this.list.length;
        for(var i=0;i<len;i++){
            var goodsLen = this.list[i].goodsList.length;
            this.list[i].checked = staturs;
            for(var j=0;j<goodsLen;j++){
                this.list[i].goodsList[j].checked = staturs;
            }
        }
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list),
            checkedAll:staturs,
        })
    }
     /*
    * 右上角编辑按钮点击事件
    */
    edit(){
        var len = this.list.length;
        if(this.state.editText=='编辑'){
            for(var i=0;i<len;i++){
                this.list[i].isEdit = false;
            }
        }else{
            for(var i=0;i<len;i++){
                this.list[i].isEdit = true;
            }
        }
        
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list),
            editText:this.state.editText=='编辑'?'完成':'编辑',
        })
    }
    /*
    * 编辑单个店铺
    */
    editStore(rowId){
        this.list[rowId].isEdit = !this.list[rowId].isEdit;
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list),
        })
    }
    /*
    * 删除按钮
    */
    deleteGoods(rowId,i){
        this.list[rowId].goodsList.splice(i,1);
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list),
        })
    }
    /*
    * 删除被选中的商品
    */
    deleteSelect(){
        // var arr = this.list;
        var len = this.list.length;
        for(var i=0;i<len;i++){
            // alert(JSON.stringify(this.list[i].goodsList[0].checked))
            var goodsLen = this.list[i].goodsList.length;
            for(var j=0;j<goodsLen;j++){
                if(this.list[i].goodsList[j].checked){
                    this.list[i].goodsList.splice(j,1);
                    goodsLen--;
                    j--;
                }
            }
        }
        var list = JSON.parse(JSON.stringify(this.list));
        this.setState({
            shopList:this.state.shopList.cloneWithRows(list)
        })
    }

    goQuerendingdan(){
        const {navigate } = this.props.navigation;
        navigate('querendingdan')
        // const { navigator } = this.props;
        // if (navigator) {
        //     navigator.push({
        //         name: '确认订单',
        //         component: querendingdan,
        //     });
        // }
    }

}



const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    textBox:{
        backgroundColor:'#fff',
        padding:20
    },
    lineItem:{
        paddingTop:3,
        paddingBottom:3,
    },
    changeNumBtn:{
        borderWidth:1,
        borderColor:'#E8EDEB',
        justifyContent:'center',
        alignItems:'center',
        width:24,
        height:24
    },
    bottomMenu:{
        flexDirection:'row',
        alignItems:'center',
        width:width,
        height:40,
        paddingLeft:10
    },
    settleBtn:{
        width:60,
        height:40,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'#FF0000'
    }
    
});